<template>
	<view class="search">
		<view class="left-slot" @click="leftSlotClick()">
			<slot name="left"></slot>
		</view>
		<view class="centesr" :class="nowRoute == 'pagesMall/classify/classify' ? 'search-box' : ''"
			:style="{ backgroundColor: bgColor }" @click="searchClick">
			<input type="text" v-model="inputValue" :disabled="disabled" :placeholder="placeholder" @blur="searchBlur"
				@input="searchInput"
				:placeholder-style="`color:${bgColor == '#FFFFFF' || bgColor == '#ffffff' ? '#CCCCCC' : '#333333'}`" />
			<!-- <image v-if="inputValue&&isClear" @click="delInput" class="close" :src="$img_path('/course/city_1.png')"
				mode="widthFix"></image> -->

			<!-- <image v-if="bgColor=='#FFFFFF'||bgColor=='#ffffff'" :src="$img_path('/course/index/s1.png')" mode=""></image>
			<image v-else :src="$img_path('/course/index/s1.png')" mode=""></image> -->

			<!-- <text v-if="nowRoute == 'pages/index/index'" class="search-btn">搜索</text> -->
			<uni-icons v-if="nowRoute == 'pagesMall/classify/classify'" type="search" size="24"></uni-icons>
			<image v-if="inputValue && isClear" @click="delInput" class="close" :src="$img_path('/course/img/12.png')"
				mode="widthFix"></image>
		</view>
		<view class="right">
			<slot name="right"></slot>
		</view>
	</view>
</template>

<script>
	export default {
		name: "header-search",
		model: {
			prop: "value",
			event: "input",
		},
		props: {
			placeholder: {
				type: String,
				default: "请输入关键词",
			},
			value: {
				type: String,
				default: "",
			},
			bgColor: {
				type: String,
				default: "#EFEEF1",
			},
			disabled: {
				type: Boolean,
				default: false,
			},
			isClear: {
				type: Boolean,
				default: true,
			},
		},
		data() {
			return {
				inputValue: "",
				nowRoute: "",
			};
		},
		watch: {
			value(val) {
				this.inputValue = val;
			},
		},
		mounted() {
			this.getNowRoute();
		},
		methods: {
			leftSlotClick() {
				this.$emit('leftSlotClick')
			},
			// 获取当前路由地址
			getNowRoute() {
				let pages = getCurrentPages();
				let nowRoute = pages[pages.length - 1].route;
				this.nowRoute = nowRoute;
			},
			searchBlur(data) {
				console.log(data, "-Blur");
				this.$emit("searchBlur", data);
			},
			searchInput(data) {
				console.log(data, "-Input");
				this.$emit("searchInput", data);
			},
			searchClick() {
				this.$emit("searchClick");
			},
			delInput() {
				this.inputValue = "";
				this.$emit("searchBlur", {
					detail: {
						value: "",
					},
					target: {
						value: "",
					},
				});
				this.$emit("searchInput", {
					detail: {
						value: "",
					},
					target: {
						value: "",
					},
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.search {
		display: flex;
		align-items: center;
		height: 100%;

		.centesr {
			flex: 1;
			background: #efeef1;
			border-radius: 96rpx;
			padding: 14rpx 28rpx;
			position: relative;
			display: flex;
			align-items: center;
			height: 100%;
			box-sizing: border-box;

			&>image {
				width: 36rpx;
				height: 36rpx;
				position: absolute;
				top: 50%;
				right: 28rpx;
				transform: translateY(-50%);

				&.close {
					width: 48rpx;
					height: 48rpx;
					left: auto;
					right: 20rpx;
					top: 50%;
					transform: translateY(-50%);
					z-index: 7;
				}
			}

			&>input {
				width: 75%;
				// padding-left: 52rpx;
			}
		}
	}

	.search-btn {
		background: #e72a2a;
		display: flex;
		width: 100rpx;
		padding: 8rpx 14rpx;
		justify-content: center;
		align-items: center;
		border-radius: 30rpx;
		color: #fff;
		margin-right: -38rpx;
	}

	.left-slot {
		// padding-left: 28rpx;
		height: 100%;
		display: flex;
		align-items: center;
	}

	.search-box {
		border: 1px solid #e72a2a;
	}
</style>